<template>
  <div class="select_list">
    <div class="select_list_item" v-for="(item, index) in list" :key="index">
      <span class="select_list_label" :style="`width: ${labelWidth}`">{{
        `${label}${index + 1}：`
      }}</span>
      <el-select
        v-model="item[selectProps]"
        placeholder="请选择"
        @change="inputChange"
        style="width: 257px"
        :clearable="true"
      >
        <el-option
          v-for="val in selectList"
          :key="val.value"
          :value="val.value"
          :label="`（${val.value}）${val.label}`"
          :disabled="
            value.findIndex(ele => ele[selectProps] === val.value) !== -1
          "
        ></el-option>
      </el-select>
      <i
        class="el-icon-error"
        @click="remove(index)"
        v-if="list.length > 1"
      ></i>
      <i
        class="el-icon-circle-plus"
        v-if="
          list.length < limit && index === list.length - 1 && item[selectProps]
        "
        @click="add"
      ></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "SelectList",
  props: ["value", "limit", "label", "selectList", "labelWidth", "selectProps"],
  components: {},
  data() {
    return {
      list: this.value.length ? this.value : [{}]
    };
  },
  computed: {},
  watch: {
    value(val) {
      if (val.length) {
        this.list = val;
      } else {
        this.list = [{}];
      }
    }
  },
  methods: {
    add() {
      this.list.push({});
      this.inputChange();
    },
    remove(index) {
      this.list.splice(index, 1);
    },
    inputChange() {
      this.$emit("input", this.list);
      this.$emit("change", this.list);
    }
  }
};
</script>

<style lang="scss">
.select_list {
  .select_list_input {
    width: 220px;
    margin-right: 4px;
  }
  .select_list_item {
    margin-top: 20px;
    &:first-of-type {
      margin-top: 0;
    }
    .select_list_label {
      display: inline-block;
      font-size: 14px;
      color: #0d0d0d;
      font-weight: bold;
    }
  }
  .el-icon-error {
    color: #989898;
  }
  .el-icon-error {
    cursor: pointer;
  }
  .el-icon-circle-plus {
    color: var(--themeColor);
    cursor: pointer;
  }
}
</style>
